<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title></title>
		<link rel="stylesheet" href="../command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css"/>
		<link rel="stylesheet" href="../command/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="../command/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" />
		<script src="../command/jquery-3.4.0.min.js"></script>
		<script src="../command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="../command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../command/bower_components/moment/min/moment.min.js"></script>
		<script src="../command/bower_components/moment/min/locales.min.js"></script>
		<script src="../command/bower_components/bootbox.min.js"></script>
		<script src="../command/bower_components/bootstrap-select/dist/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
		<script src="../command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../command/bower_components/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../command/bower_components/moment/min/locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../command/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="../command/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="../command/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="application/javascript">
			$(function(){
				$.ajax({
					type:"get",		//提交类型
					dataType:"json",		//数据类型
					url:"../json/building.json",		//数据访问类型
					success:function(result){		//返回成功调用函数
						creteTable(result);		//函数调用
					},
					error:function(data){		//返回失败调用函数
						alert(data);
					}
				});
				// 模态框弹出,点击事件
				$("#btnNew").click(function(){
					$("#newData").modal();
				});
				$("#btnDle").click(function(){
					$("#clears").modal();
				});
				$("#btnSupply").click(function(){
					$("#raise").modal();
				});
			});
			//数据绑定在表单
			function creteTable(businessenter){
				$("#tblUser").bootstrapTable("destroy");	//清除表格数据
				$("#tblUser").bootstrapTable({
					data:businessenter,
					loadMsg:"正在加载数据",
					sidePagination:"client",
					pageSize:"5",
					pagination:true,
					//singleSelect:true,
					columns:[
						{
							field:"state",
							checkbox:true,
							align:"center"
						},
						{
							field:"place",
							title:"大楼地点",
							align:"center"
						},
						{
							field:"stratdate",
							title:"开始时间",
							align:"center"
						},
						{
							field:"enddate",
							title:"竣工时间",
							align:"center"
						},
						{
							field:"director",
							title:"负责人",
							align:"center"
						},
						{
							field:"amount",
							title:"总金额",
							align:"center"
						},
						{
							field:"companies",
							title:"施工单位",
							align:"center"
						},
						{
							field:"contacts",
							title:"联系人",
							align:"center"
						},
						{
							field:"upfile",
							title:"附件",
							align:"center"
						},
					]
				})
			}
		</script>
		<style type="text/css">
			td {
				padding: 3px;
				}
		</style>
	</head>
	<body style="background-color: #f3f5dd;">
		<div class="container-fluid">
			<div class="row col-md-12">
				<ol class="breadcrumb" style="background-color: #888;width: 103%;box-shadow: 0px 0px 15px rgba(0,0,0,0.6);">
					<li>
						<a href="#" target="pageFrame" style="color: white;">大楼</a>
					</li>
				</ol>
			</div>
			
			<!-- 查询区域开始 -->
			<div class="row ">
				<div class="col-md-1"></div>
				<div class="form-group col-md-10">
					<div class="form-inline" id="divSelect">
						<div class="form-group">
							<label class="control-label">大楼地点</label>
							<input type="text" id="bsbuilding" name="bsbuilding" maxlength="20" class="form-control"/>
						</div>
						<div class="form-group">
							<label class="control-label">负责人</label>
							<input type="text" id="bsdirector" name="bsdirector" maxlength="20" class="form-control"/>
						</div>
						<div class="form-group">
							<label class="control-label">施工单位</label>
							<input type="text" id="bscompanies" name="bscompanies" maxlength="20" class="form-control"/>
						</div>
						<div class="form-group">
							<button type="button" id="btnquery" class="btn btn-default">查询</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 查询区域结束 -->
			<hr style="border-color: #888;margin: 20px;">
			<!-- 功能区域开始 -->
			<div class="row col-md-12">
				<button id="btnNew" class="btn btn-default" type="button">新增</button>
				<button id="btnUpdate" class="btn btn-default" type="button">修改</button>
				<button id="btnDle" class="btn btn-default" type="button">删除</button>
				<button id="btnFile" class="btn btn-default" type="button">开工/竣工</button>
				<button id="btnSupply" class="btn btn-default" type="button">补充</button>
			</div>
			<!-- 功能区域结束 -->
			<!-- 表格区域开始 -->
			<div class="row col-md-12" style="margin-top: 1%;">
				<table id="tblUser" rules="rows" frame="hsides">
				</table>
			</div>
			<!-- 表格区域结束 -->
			<!-- 工程实施 -->
			<table rules="rows">
				<tr>
					<th colspan="4" style="font-size: 15px;background-color: #888;color: white;border-radius: 5px;box-shadow: 0px 0px 15px rgba(0,0,0,0.6);">
						工程实施
					</th>
				</tr>
				<tr>
					<td align="center"><span>是否有变更：</span></td>
					<td align="center"><span>安全巡检报告附件：</span></td>
					<td align="center"><span>变更原因：</span></td>
					<td align="center"><span>变更后竣工时间</span></td>
				</tr>
				<tr>
					<td align="center">
						<input type="radio" name="changed"/>有
						<input type="radio" name="changed"/>无
					</td>
					<td align="center">
						<input type="file" id="addsafe" name="addsafe">
					</td>
					<td align="center">
						<textarea class="form-control"></textarea>
					</td>
					<td align="center">
						<div class="input-group date form_date">
							<input type="text" readonly="" class="form-control time" placeholder="时间" style="background-color: white;"/>
							<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<button id="btnSave" class="btn btn-default" type="button">保存</button>
					</td>
				</tr>
			</table>
			<br>
			<br>
			<!-- 工程验收 -->
			<table rules="rows">
					<tr>
						<th colspan="4" style="font-size: 15px;background-color: #888;color: white;border-radius: 5px;box-shadow: 0px 0px 15px rgba(0,0,0,0.6);">
							工程验收
						</th>
					</tr>
					<tr>
						<td align="center"><span>验收时间</span></td>
						<td align="center"><span>验收人</span></td>
						<td align="center"><span>验收材料</span></td>
					</tr>
					<tr>
						<td align="center">
							<div class="input-group date form_date">
								<input type="text" readonly="" class="form-control time" placeholder="验收时间" style="background-color: white;"/>
								<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</td>
						<td align="center">
							<input type="text" id="ysr" name="ysr" class="form-control">
						</td>
						<td align="center">
							<input type="text" id="cailiao" name="cailiao" class="form-control">
						</td>
					</tr>
					<tr>
						<td>
							<button id="btnTJ" class="btn btn-default" type="button">提交</button>
						</td>
					</tr>
			</table>
		</div>
		
		<!-- 模态框处理 -->
		<div class="modal fade" id="newData" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="hidden">
			<div class="modal-dialog" style="box-shadow: 0px 0px 10px rgba(217,254,214,1);border: 1px solid #99fcda;border-radius: 4px;">
				<div class="modal-content">
					<!-- 模态框标题 -->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">详细信息</h4>
					</div>
					<!-- 主体表单 -->
					<div class="modal-body form-inline">
						<table>
							<tr>
								<td>
									<label class="control-label">大楼地点</label>
								</td>
								<td>
									<input type="text" id="place" name="place" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">开工时间</label>
								</td>
								<td>
									<div class="input-group date form_date">
										<input type="text" readonly="" class="form-control time" placeholder="开工时间" style="background-color: white;"/>
										<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">竣工时间</label>
								</td>
								<td>
									<div class="input-group date form_date">
										<input type="text" readonly="" class="form-control time" placeholder="竣工时间" style="background-color: white;"/>
										<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
									</div>
								</td>
								<td>
									<label class="control-label">负责人</label>
								</td>
								<td>
									<input type="text" id="director" name="director" maxlength="20" class="form-control"/>
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">总金额</label>
								</td>
								<td>
									<input type="text" id="amount" name="amount" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">施工单位</label>
								</td>
								<td>
									<input type="text" id="companies" name="companies" maxlength="20" class="form-control"/>
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">联系人</label>
								</td>
								<td>
									<input type="text" id="contacts" name="contacts" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">附件</label>
								</td>
								<td>
									<input type="file" id="upfile" name="file"/>
								</td>
							</tr>
						</table>
					</div>
					<!-- 模态底部 -->
					<div class="modal-footer">
						<button type="button" id="btnsave" class="btn btn-info">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 模态框删除处理 -->
		<div class="modal fade" id="clears" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="hidden">
			<div class="modal-dialog" style="box-shadow: 0px 0px 10px rgba(217,254,214,1);border: 1px solid #99fcda;border-radius: 4px;">
				<div class="modal-content">
					<!-- 模态框标题 -->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">详细信息</h4>
					</div>
					<!-- 主体表单 -->
					<div class="modal-body form-inline">
						<h4>
							你确定删除吗？？？！！！！！
						</h4>
					</div>
					<!-- 模态底部 -->
					<div class="modal-footer">
						<button type="button" id="btnok" class="btn btn-info">确定</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 模态框补充文件 -->
		<div class="modal fade" id="raise" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="hidden">
			<div class="modal-dialog" style="box-shadow: 0px 0px 10px rgba(217,254,214,1);border: 1px solid #99fcda;border-radius: 4px;">
				<div class="modal-content">
					<!-- 模态框标题 -->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">详细信息</h4>
					</div>
					<!-- 主体表单 -->
					<div class="modal-body form-inline">
						<table>
							<tr>
								<td>
									<label class="control-label">补充人员</label>
								</td>
								<td>
									<input type="text" id="addstaff" name="addstaff" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">补充附件</label>
								</td>
								<td>
									<input type="text" id="addupfile" name="addupfile" maxlength="20" class="form-control"/>
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">补充理由</label>
								</td>
								<td>
									<input type="text" id="addreason" name="addreason" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">双方是否认可</label>
								</td>
								<td>
									<input type="radio" name="addaccept"/>认可
									<input type="radio" name="addaccept"/>不认可
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">补充时间</label>
								</td>
								<td>
									<div class="input-group date form_date">
										<input type="text" readonly="" class="form-control time" placeholder="补充时间" style="background-color: white;"/>
										<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
									</div>
								</td>
								<td>
									<label class="control-label">认可时间</label>
								</td>
								<td>
									<div class="input-group date form_date">
										<input type="text" readonly="" class="form-control time" placeholder="认可时间" style="background-color: white;"/>
										<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<label class="control-label">总额变更</label>
								</td>
								<td>
									<input type="text" id="totalchange" name="totalchange" maxlength="20" class="form-control"/>
								</td>
								<td>
									<label class="control-label">最终竣工时间</label>
								</td>
								<td>
									<div class="input-group date form_date">
										<input type="text" readonly="" class="form-control time" placeholder="最终竣工时间" style="background-color: white;"/>
										<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
									</div>
								</td>
							</tr>
						</table>
						</tr>
						<tr>
							<td>
								<label class="control-label">双方签字电子版</label>
							</td>
							<td>
								<input type="file" id="addsign" name="addsign"/>
							</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
						</tr>
					</div>
					<!-- 模态底部 -->
					<div class="modal-footer">
						<button type="button" id="btnok" class="btn btn-info">保存</button>
					</div>
				</div>
			</div>
		</div>
		<script>
			//日期控件
			$(".time").datetimepicker({
				language:"zh-CN",	//中英文
				weekStart: 1,	//一周从哪天开始
				todayBtn: 1,	//当天日期按钮
				autoclose: 1,	//选完日期后是否自动关闭
				todayHighlight: 1,	//当天日期高亮
				startView: 2,	//选完时间后首先显示的视图
				minView: 2,		//最精确的时间
				forceParse: 1,	//强制解析
				format:"yyyy-mm-dd",	//显示格式
				pickerPosition:"bottom-left"	//选择框位置
			});
			$("#btnquery").click(function(){
				//获取日期控件中的值
				var date1 = $(".form_date input").val();
				console.log(date1);
			});
		</script>
	</body>
</html>
